<template>
  <div ref="piePadAngleRef" :style="{width: '100%',height: cheight + 'px'}"></div>
</template>

<script lang="ts">
import {toRefs, reactive, defineComponent, ref, onMounted, shallowRef, watch, nextTick} from 'vue';
import {ECharts, init} from "echarts";
import {useThemeConfig} from "/@/stores/themeConfig";
import {storeToRefs} from "pinia";
import theme from '/src/components/chart/theme'

export default defineComponent({
  name: 'PiePadAngleChart',
  props: {
    cheight: {
      type: Number,
      default: () => 600,
    },
    data: {
      type: String,
      default: () => 'wangeditor',
    },
  },
  setup(props, {emit}) {
    const piePadAngleRef = ref<HTMLElement>();
    const echartInstance = shallowRef<ECharts>();
    const storesThemeConfig = useThemeConfig();
    const {themeConfig} = storeToRefs(storesThemeConfig);
    const state = reactive({
      theme: '',
      bgColor: 'transparent',
      titleColor: '#303133',
    });
    watch([themeConfig.value.isCollapse, props.data],
        (newVal) => {
          nextTick(() => {
            setTimeout(() => {
              initLineChart();
            }, 500);
          });
        },
        {
          deep: true,
          immediate: true,
        })
    onMounted(() => {
      setTimeout(() => {
        initLineChart();
      }, 500);
    });
    const initLineChart = () => {
      if (echartInstance.value) echartInstance.value.dispose();
      echartInstance.value = init(piePadAngleRef.value, state.theme);
      const option = {
        title: {
          text: props.data.title,
          left: 'center',
          textStyle: {
            fontSize: 14
          },
          top: 40
        },
        color: theme.colors2,
        tooltip: {
          trigger: 'item'
        },
        legend: {
          bottom: 0,
          left: 'center'
        },
        grid: {
          left: 10,
          right: 10,
          bottom: 0,
          top: 0,
          // show: true,
          containLabel: true
        },
        series: [
          {
            name: props.data.title,
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            padAngle: 5,
            itemStyle: {
              borderRadius: 10
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 20,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: props.data.list
          }
        ]
      };
      echartInstance.value.setOption(option);
      window.addEventListener('resize', () => {
        echartInstance.value && echartInstance.value.resize()
      });
    };
    return {
      themeConfig,
      echartInstance,
      piePadAngleRef,
      ...toRefs(state),
    };
  },
});
</script>
